<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <!--引入Vue-->
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div class="root">
<!--  template可以包裹想要的元素来统一处理v-if属性,而不影响dom结构-->
  <template v-if="n === 1">
    <h1>桌子</h1>
    <h1>椅子</h1>
    <h1>电脑</h1>
  </template>
  <button @click="n++">点我+1</button>
</div>
</body>

<!--v-if 和 v-show-->
<!--v-if和v-else之间不能被打断,否则后面就不生效了-->
<script type="text/javascript">
  new Vue({
    el: '.root',
    data: {
      name: '北京',
      n: 0
    }
  })
</script>
</html>
